javaScrip
任務:寫一個函式名為calculator，具有自動計算漢堡總價與可樂總價。
假設再函式內設計漢堡單價50，可樂單價20元
先簡單假設有個view html ，利用 id="hamNumId" 串接值到javaScript的函式。
使用者可以簡單寫下買的漢堡與可樂數量，會自動算出總價 顯示再html的console
九四帥
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="voiewport" content="width = device-width,initial-scale=1.0">
<meta http-equiv = "X-UA-Compatible" content="ie = edge">
<title>Document</title>
<link rel="stylesheet" href = "style.css">
</head>
<body>
<div class="wrap">
<div class="wrap-inner">
<h1> calculator for restrument</h1>
<p> 請問客人您要點甚麼餐?</p>
<p> 顧客:給我<input type="text" id="hamNumId">個漢堡，再給我<input type="text" id="cokeNumId">杯可樂</p>
<p>服務生:<input type="button" Id="countId" value="計算中按鈕">，好的,總計是<input type="text" id="totalId">元</p>
</div>
</div>
//.onclick 觸發事件的監聽按鈕元件
// function() 是一個沒有參數的函式
var humPrice=50;
var cokePrice=20;
document.getElementById('countId').onclick = function(){
alert('you already click the button!');
var hamNum = parseInt(document.getElementById('hamNumId').value)*humPrice;
var cokeNum = parseInt(document.getElementById('cokeNumId').value)*cokePrice;
var totalprice= hamNum + cokeNum;
//最後最重要的totalId串接到前端顯示畫面的總金額
document.getElementById('totalId').textContent=totalprice;
console.log(totalprice);
}
.value 是一個方法，可以把前端輸入的數字顯示成字串。
JavaScript有個冷知識，String之間可以數字相乘，會計算正確；但是數字相加則無法正確計算出數值，會變成首尾相連。例如:
String 狀態的 '5'+'2'='52'
String 狀態的 '5'*'2' = '10'
因此要使用parseInt方法
a =
parseInt('5'+'2')=10
本文經六角學院同意授權之筆記文章
https://courses.hexschool.com/
https://courses.hexschool.com/courses/js/lectures/11952161
iThome鐵人賽
看影片追技術